{% extends "base.html" %}

{% block title %}{{ room.name }} - 风之宿{% endblock %}

{% block content %}
<!-- 页面头部导航路径 -->
<div class="bg-gray-50 py-4">
  <div class="container mx-auto px-4">
    <div class="text-sm text-gray-500">
      <a href="{{ url_for('index') }}" class="hover:text-primary transition-colors">首页</a>
      <span class="mx-2">/</span>
      <a href="{{ url_for('rooms') }}" class="hover:text-primary transition-colors">客房</a>
      <span class="mx-2">/</span>
      <span class="text-gray-700">{{ room.name }}</span>
    </div>
  </div>
</div>

<!-- 宾馆详情主体 -->
<section class="py-12 bg-white">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- 左侧：图片轮播和基本信息 -->
      <div class="lg:col-span-2">
        <!-- 图片轮播 -->
        <div class="relative rounded-xl overflow-hidden shadow-lg mb-6 group">
          <div id="room-image-carousel" class="flex transition-transform duration-500 ease-in-out">
            {% for image in room_images %}
            <div class="min-w-full">
              <img src="{{ url_for('static', filename='uploads/' + image.image_url) }}"
                   alt="{{ room.name }}的照片{% if image.is_primary %}（主图）{% endif %}"
                   class="w-full h-[450px] object-cover">
            </div>
            {% else %}
            <div class="min-w-full">
              <img src="{{ url_for('static', filename='images/default-room.png') }}"
                   alt="{{ room.name }}的照片"
                   class="w-full h-[450px] object-cover">
            </div>
            {% endfor %}
          </div>

          <!-- 轮播控制按钮 -->
          <button id="prev-image" class="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/80 rounded-full flex items-center justify-center shadow-md opacity-0 group-hover:opacity-100 transition-opacity">
            <i class="fa fa-chevron-left text-gray-700"></i>
          </button>
          <button id="next-image" class="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/80 rounded-full flex items-center justify-center shadow-md opacity-0 group-hover:opacity-100 transition-opacity">
            <i class="fa fa-chevron-right text-gray-700"></i>
          </button>

          <!-- 图片指示器 -->
          {% if room_images and room_images|length > 1 %}
          <div class="absolute bottom-4 left-0 right-0 flex justify-center gap-2">
            {% for image in room_images %}
            <button class="w-2.5 h-2.5 rounded-full bg-white/60 carousel-indicator {% if loop.first %}bg-white w-8{% endif %}"
                    data-index="{{ loop.index0 }}"></button>
            {% endfor %}
          </div>
          {% endif %}
        </div>

        <!-- 宾馆描述 -->
        <div class="mb-10">
          <h2 class="text-3xl font-serif font-bold text-gray-800 mb-4">{{ room.name }}</h2>
          <div class="text-gray-500 mb-6">
            <i class="fa fa-map-marker mr-1"></i>
            风之宿{{ room.floor }}楼，{{ room.view_type }}景观
          </div>

          <div class="prose prose-gray max-w-none">
            <p>{{ room.description }}</p>
          </div>
        </div>

        <!-- 宾馆设施 -->
        <div class="mb-10">
          <h3 class="text-2xl font-serif font-bold text-gray-800 mb-6 pb-2 border-b border-gray-200">宾馆设施</h3>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            {% if amenity_categories %}
              {% for category, amenities in amenity_categories.items() %}
              <div>
                <h4 class="text-lg font-semibold text-gray-700 mb-3 flex items-center">
                  <i class="fa fa-th-list text-primary mr-2"></i>
                  {{ category }}
                </h4>
                <ul class="grid grid-cols-2 gap-y-2">
                  {% for amenity in amenities %}
                  <li class="flex items-center text-gray-600">
                    <i class="fa fa-check text-green-500 mr-2 text-sm"></i>
                    <span>{{ amenity.name }}</span>
                  </li>
                  {% endfor %}
                </ul>
              </div>
              {% endfor %}
            {% else %}
              <div class="col-span-full text-gray-500 py-4">
                <p>暂无设施信息</p>
              </div>
            {% endif %}
          </div>
        </div>
      </div>

      <!-- 右侧：预订信息 -->
      <div class="lg:col-span-1">
        <div class="sticky top-6">
          <!-- 价格和预订卡片 -->
          <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6 border border-gray-100">
            <div class="p-6 border-b border-gray-100">
              <div class="flex items-end mb-2">
                <span class="text-3xl font-bold text-gray-900">¥{{ room.price }}</span>
                <span class="text-gray-500 ml-1 mb-1">/晚</span>
              </div>
              <p class="text-gray-500 text-sm">含税费及服务费</p>
            </div>

            <div class="p-6">
              {% if session.user_id %}
              <a href="{{ url_for('user.book_room', room_id=room.id) }}" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-colors flex items-center justify-center text-lg mb-4">
                <i class="fa fa-calendar-check-o mr-2"></i>
                立即预订
              </a>
              {% else %}
              <a href="{{ url_for('user.user_login', next=url_for('room_detail', room_id=room.id)) }}" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-colors flex items-center justify-center text-lg mb-4">
                <i class="fa fa-user-o mr-2"></i>
                登录后预订
              </a>
              {% endif %}

              <div class="text-center text-sm text-gray-500">
                <i class="fa fa-shield mr-1"></i>
                免费取消 · 无需预付 · 到店付款
              </div>
            </div>
          </div>

          <!-- 宾馆信息摘要 -->
          <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6 border border-gray-100">
            <div class="p-6">
              <h4 class="font-medium text-gray-800 mb-4">宾馆信息</h4>

              <ul class="space-y-3">
                <li class="flex justify-between pb-3 border-b border-gray-100">
                  <span class="text-gray-600">宾馆大小</span>
                  <span class="font-medium">{{ room.size }}平方米</span>
                </li>
                <li class="flex justify-between pb-3 border-b border-gray-100">
                  <span class="text-gray-600">容纳人数</span>
                  <span class="font-medium">{{ room.capacity }}人</span>
                </li>
                <li class="flex justify-between pb-3 border-b border-gray-100">
                  <span class="text-gray-600">床型</span>
                  <span class="font-medium">{{ room.bed_type }}</span>
                </li>
                <li class="flex justify-between pb-3 border-b border-gray-100">
                  <span class="text-gray-600">楼层</span>
                  <span class="font-medium">{{ room.floor }}楼</span>
                </li>
                <li class="flex justify-between pb-3 border-b border-gray-100">
                  <span class="text-gray-600">景观</span>
                  <span class="font-medium">{{ room.view_type }}</span>
                </li>
                <li class="flex justify-between">
                  <span class="text-gray-600">WiFi</span>
                  <span class="font-medium text-green-600"><i class="fa fa-check mr-1"></i>免费</span>
                </li>
              </ul>
            </div>
          </div>

          <!-- 可预订日期 -->
          <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
            <div class="p-6">
              <h4 class="font-medium text-gray-800 mb-4">近期可预订</h4>

              <div class="text-sm text-gray-500 mb-4">
                未来30天内的可预订日期
              </div>

              <div class="grid grid-cols-7 gap-1 text-center mb-2">
                {% for day in ['一', '二', '三', '四', '五', '六', '日'] %}
                <div class="text-xs font-medium text-gray-500 py-2">{{ day }}</div>
                {% endfor %}
              </div>

              <div class="grid grid-cols-7 gap-1 text-center">
                {% for date_info in available_dates %}
                <div class="relative py-2">
                  <button class="w-8 h-8 rounded-full flex items-center justify-center mx-auto
                                {% if date_info.available %}
                                hover:bg-primary/10 text-gray-800
                                {% else %}
                                bg-gray-100 text-gray-400 cursor-not-allowed
                                {% endif %}
                                {% if date_info.date == today %}
                                bg-primary text-white
                                {% endif %}
                                transition-colors">
                    {{ date_info.date.day }}
                  </button>
                  {% if date_info.available %}
                  <div class="text-[10px] text-gray-500 mt-1">
                    ¥{{ room.price }}
                  </div>
                  {% else %}
                  <div class="text-[10px] text-gray-400 mt-1 line-through">
                    已订
                  </div>
                  {% endif %}
                </div>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- 相关推荐 -->
<section class="py-12 bg-gray-50">
  <div class="container mx-auto px-4">
    <h3 class="text-2xl font-serif font-bold text-gray-800 mb-8">相关推荐</h3>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {% for related_room in related_rooms %}
      <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
        <div class="h-48 overflow-hidden">
          <img src="{{ url_for('static', filename='uploads/' + related_room.image_url) if related_room.image_url else url_for('static', filename='images/default-room.png') }}"
               alt="{{ related_room.name }}"
               class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
        </div>
        <div class="p-5">
          <h4 class="font-semibold text-lg text-gray-800 mb-2 hover:text-primary transition-colors">
            <a href="{{ url_for('room_detail', room_id=related_room.id) }}">{{ related_room.name }}</a>
          </h4>
          <div class="flex justify-between items-center">
            <div class="text-sm text-gray-600">
              <i class="fa fa-user-o mr-1"></i> 最多 {{ related_room.capacity }}人
            </div>
            <div class="font-bold text-gray-900">¥{{ related_room.price }}<span class="text-sm font-normal text-gray-500">/晚</span></div>
          </div>
        </div>
      </div>
      {% else %}
      <div class="col-span-full text-center py-10">
        <p class="text-gray-500">暂无相关推荐宾馆</p>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- 常见问题 -->
<section class="py-12 bg-white">
  <div class="container mx-auto px-4 max-w-3xl">
    <h3 class="text-2xl font-serif font-bold text-gray-800 mb-8 text-center">常见问题</h3>

    <div class="space-y-4">
      {% for faq in [
        {'question': '可以提前入住或延迟退房吗？', 'answer': '标准入住时间为15:00后，退房时间为11:00前。如需提前入住或延迟退房，请提前与前台联系。'},
        {'question': '宾馆内是否提供免费WiFi？', 'answer': '是的，所有宾馆均提供免费高速WiFi，连接信息会在您入住时提供。'},
        {'question': '是否可以携带宠物？', 'answer': '抱歉，本酒店不接受宠物入住，导盲犬除外。'},
        {'question': '宾馆内是否提供洗漱用品？', 'answer': '是的，我们提供高品质的洗漱用品、毛巾、浴衣等基本用品。'},
        {'question': '酒店是否有停车场？', 'answer': '是的，酒店提供免费停车场，如有需要请在预订时备注。'}
      ] %}
      <div class="border border-gray-200 rounded-lg overflow-hidden">
        <button class="faq-toggle w-full flex justify-between items-center p-4 text-left bg-white hover:bg-gray-50 transition-colors">
          <span class="font-medium text-gray-800">{{ faq.question }}</span>
          <i class="fa fa-chevron-down text-gray-400 transition-transform"></i>
        </button>
        <div class="faq-content hidden p-4 pt-0 text-gray-600 bg-white">
          <p>{{ faq.answer }}</p>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 图片轮播功能
  const carousel = document.getElementById('room-image-carousel');
  const prevBtn = document.getElementById('prev-image');
  const nextBtn = document.getElementById('next-image');
  const indicators = document.querySelectorAll('.carousel-indicator');
  let currentIndex = 0;
  const totalImages = indicators.length || 1;

  function updateCarousel() {
    carousel.style.transform = `translateX(-${currentIndex * 100}%)`;

    indicators.forEach((indicator, index) => {
      if (index === currentIndex) {
        indicator.classList.add('bg-white', 'w-8');
        indicator.classList.remove('bg-white/60', 'w-2.5');
      } else {
        indicator.classList.add('bg-white/60', 'w-2.5');
        indicator.classList.remove('bg-white', 'w-8');
      }
    });
  }

  prevBtn.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + totalImages) % totalImages;
    updateCarousel();
  });

  nextBtn.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % totalImages;
    updateCarousel();
  });

  indicators.forEach((indicator, index) => {
    indicator.addEventListener('click', () => {
      currentIndex = index;
      updateCarousel();
    });
  });

  // 自动轮播
  let carouselInterval = setInterval(() => {
    currentIndex = (currentIndex + 1) % totalImages;
    updateCarousel();
  }, 5000);

  carousel.parentElement.addEventListener('mouseenter', () => {
    clearInterval(carouselInterval);
  });

  carousel.parentElement.addEventListener('mouseleave', () => {
    carouselInterval = setInterval(() => {
      currentIndex = (currentIndex + 1) % totalImages;
      updateCarousel();
    }, 5000);
  });

  // 常见问题折叠功能
  const faqToggles = document.querySelectorAll('.faq-toggle');
  faqToggles.forEach(toggle => {
    toggle.addEventListener('click', () => {
      const content = toggle.nextElementSibling;
      const icon = toggle.querySelector('i');
      content.classList.toggle('hidden');
      icon.classList.toggle('rotate-180');
    });
  });
});
</script>
{% endblock %}